<!--
 * @Author: zhaoxiangyu@
 * @Date: 2022-02-10 09:50:20
 * @LastEditors: 647355931@qq.com
 * @LastEditTime: 2022-02-14 09:00:06
 * @Description: file content
-->
    <script>
        // 全局获取每一个依赖函数
        let activeEffect

        class Dep {
            // 依赖收集存储的set
            constructor(value) {
                this.subscribers = new Set()
                this._value = value
                console.log('val ==> ', value)
            }

            get value() {
                // 获取的时候 收集依赖
                this.depend()
                return this._value
            }

            set value(val) {
                this._value = val
                // 修改的时候 通知依赖
                this.notify()
                console.log('val ==> ', val)
            }

            // 收集依赖
            depend() {
                // 当有值时 不会重复调用
                console.log(' 依赖收集')
                if (activeEffect) {
                    console.log(' 依赖收集成功')
                    this.subscribers.add(activeEffect)
                }
            }
            // 通知更新依赖
            notify() {
                // 通知每一项依赖更新
                console.log('this.subscribers ===> ', this.subscribers)
                this.subscribers.forEach(effect => {
                    effect()
                })
            }
        }

        function watchEffect(effect) {
            // effect 就是调用的参数函数
            activeEffect = effect
            effect()
            // 调用后清空
            activeEffect = null
        }

        const dep = new Dep('hello')

        watchEffect(() => {
            // debugger
            dep.depend()
            // console.log('effect run')
        })

        // 如果依赖改变 会通知执行监听
        dep.notify()

        setTimeout(() => {
            dep.value = "张三"
        }, 2000)
        
    </script>